<template>
	<div style="position: relative;">
		<el-progress
			:type="type"
			:color="color"
			:width="width"
			:text-color="textColor"
			:stroke-width="strokeWidth"
			:show-text="showText"
			:format="format"
			:text-inside="textInside"
			:percentage="val"
			:define-back-color="defineBackColor"
		></el-progress>
		<div
			v-if="showCustomText"
			:style="{
				width: `${width}px`,
				height: `${width}px`,
				marginTop: `-${width/2+3}px`,
				marginLeft: `-${width/2}px`,
				color: textColor,
				...customTextStyle,
			}"
			style="position: absolute;top: 50%;left: 50%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
			class="flex-center"
		>{{ format() }}</div>
	</div>
</template>
<script>
    export default {
        props: {
            showCustomText: {
                type: Boolean,
                default: false
            },
            customTextStyle: {
                type: Object,
                default() {
                    return {
                        fontSize: '13px'
                    };
                }
            },
            type: {
                type: String,
                default: 'line'
            },
            color: {
                type: String,
                default: ''
            },
            textColor: {
                type: String,
                default: ''
            },
            strokeWidth: {
                type: Number,
                default: 6
            },
            width: {
                type: Number,
                default: 126
            },
            percentage: {
                type: Number,
                default: 0
            },
            showText: {
                type: Boolean,
                default: true
            },
            textInside: {
                type: Boolean,
                default: false
            },
            unit: {
                type: String,
                default: '%'
            },
            defineBackColor: {
                type: String,
                default: '#dcdee2'
            }
        },
        methods: {
            format() {
                return this.percentage + this.unit;
            }
        },
        data() {
            return {
                val: 0
            };
        },
        watch: {
            percentage: {
                handler(newVal) {
                    // 解决el-progress 大于100时，报错的问题
                    this.val = newVal <= 100 ? newVal : 100;
                },
                immediate: true
            }
        }
    };
</script>
